<template>
    <div class="right_mainbox bg_white">
      <div class="margin_bottom20">
        <el-tabs type="card" closable @tab-click="handleClick" @tab-remove="handleRemove">
        <el-tab-pane label="用户管理">
          <div class="margin_bottom20">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="12">
                <!--<el-button-group>-->
                <router-link to="/form-edit"><el-button type="primary" size="small" icon="edit">编辑</el-button></router-link>
                <el-button type="primary" size="small"><i class="iconfont icon-plus"></i>新增</el-button>
                <el-button type="primary" size="small" icon="delete">删除</el-button>
                <el-button type="primary" size="small"><i class="iconfont icon-daoru"></i>导入</el-button>
                <el-button type="primary" size="small"><i class="iconfont icon-daochu3"></i>导出</el-button>
              <!--</el-button-group>-->
              </el-col>
              <el-col :span="6">
                <el-select v-model="value" size="small" placeholder="请选择">
                  <el-option v-for="item in options" size="small" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-input placeholder="搜索..." size="small"><el-button slot="append" icon="search"></el-button></el-input>
              </el-col>
            </el-row>
          </div>
          <!--列表-->
          <el-table :data="tableData" border :default-sort = "{prop: 'date', order: 'descending'}" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="date" sortable label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="province" label="省份"></el-table-column>
            <el-table-column prop="city" label="市区"></el-table-column>
            <el-table-column prop="address" label="地址" width="250"></el-table-column>
            <el-table-column prop="zip" label="邮编"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="dialogTableVisible = true" type="text" size="small">查看</el-button>
                <el-button @click="dialogFormVisible = true" type="text" size="small">编辑</el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
         <!-- 列表弹窗 -->
          <el-dialog title="收货地址" v-model="dialogTableVisible">
            <el-table :data="gridData">
              <el-table-column property="date" label="日期" width="150"></el-table-column>
              <el-table-column property="name" label="姓名" width="200"></el-table-column>
              <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
          </el-dialog>
          <!-- 表单弹窗 -->
          <el-dialog title="收货地址" v-model="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="活动区域" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
          <!--分页-->
          <div class="block margin_top20">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
              class="float_right"
              >
            </el-pagination>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
      </el-tabs>
      </div>
      
    </div>
</template>

<script>


  export default {
  
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick() {
        console.log(1);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200331
        }, {
          date: '2016-05-02',
          name: '张静',
          province: '北京',
          city: '朝阳区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200332
        }, {
          date: '2016-05-04',
          name: '刘航',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '赵磊',
          province: '北京',
          city: '朝阳区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200334
        }],
        options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: 'IT'
        }, {
          value: '选项3',
          label: '金融'
        }, {
          value: '选项4',
          label: '地产'
        }],
        value: '',
        currentPage3: 5,
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    }
  }
</script>
